{% stylesheet %}
.block_product_hot {
  background: var(--bg-color);
}

.block_product_hot .hot-product-warp {
  font-size: 0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

.block_product_hot .product-item-body {
  position: relative;
  overflow: hidden;
  background: #f4f4f4;
  padding: 15px 30px;
}

@media screen and (max-width: 767px) {
  .block_product_hot .product-item-body {
    padding: 10px 15px;
  }
}

@media screen and (min-width: 767px) and (max-width: 1024px) {
  .block_product_hot .product-item-body {
    padding: 15px;
  }
}

.block_product_hot .product-item-body .product-item-info-price {
  font-size: 24px;
  line-height: 28px;
  display: flex;
  flex-wrap: wrap;
}

@media screen and (max-width: 767px) {
  .block_product_hot .product-item-body .product-item-info-price {
    line-height: calc(28px * 0.7);
  }
}

.block_product_hot .product-item-body .product-item-info-price .general-price {
  font-weight: 800 !important;
}

@media screen and (max-width: 767px) {
  .block_product_hot .product-item-body .product-item-info-price .general-price {
    font-size: calc(24px * 0.7);
  }
}

.block_product_hot .product-item-body .product-item-info-price .general-oldprice {
  font-size: 20px;
}

@media screen and (max-width: 767px) {
  .block_product_hot .product-item-body .product-item-info-price .general-oldprice {
    font-size: calc(20px * 0.7);
  }
}

.block_product_hot .product-item-body .product-item-info-title {
  height: 18px;
  font-size: 14px;
  font-weight: 300;
  margin-top: 10px;
  color: var(--title_color);
}

@media screen and (max-width: 767px) {
  .block_product_hot .product-item-body .product-item-info-title {
    margin-top: 4px;
  }
}

.block_product_hot .product-item {
  display: inline-block;
  background-color: #fff;
  width: 380px;
  vertical-align: top;
  cursor: pointer;
}

.block_product_hot .product-item:hover .product-item-operate {
  transform: translateX(0);
}

.block_product_hot .product-item .product-item-picture {
  width: 380px;
  height: 380px;
  position: relative;
  overflow: hidden;
}

.block_product_hot .product-item .product-item-picture .product_card-soldout {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 30px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 50px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 14px;
}

.block_product_hot .product-item .product-item-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.block_product_hot .product-item .product-item-picture .product-item-picture-label {
  position: absolute;
  top: 0;
  right: -8px;
  height: 44px;
  line-height: 44px;
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  padding: 0 24px;
  z-index: 10;
}

.block_product_hot .product-item .product-item-picture .product-item-picture-label::before {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #ffb100;
  transform: skewX(15deg);
  content: "";
  z-index: -1;
}

@media screen and (max-width: 767px) {
  .block_product_hot .product-item .product-item-picture .product-item-picture-label {
    font-size: 12px;
    height: calc(44px * 0.7);
    line-height: calc(44px * 0.7);
  }
}

.block_product_hot .product-item:nth-child(2n) {
  margin: 0 30px;
}

@media screen and (min-width: 767px) and (max-width: 1200px) {
  .block_product_hot .product-item {
    width: calc(100% / 3 - 10px);
  }
  .block_product_hot .product-item:nth-child(2n) {
    margin: 0 15px;
  }
  .block_product_hot .product-item .product-item-picture {
    width: 100%;
    height: calc(100vw / 3 - 10px);
  }
  .block_product_hot .product-item .product-item-picture img {
    width: 100%;
    height: calc(100vw / 3 - 10px);
    object-fit: cover;
  }
}

@media screen and (max-width: 767px) {
  .block_product_hot .product-item {
    width: calc(100vw / 1.8 - 30px);
  }
  .block_product_hot .product-item:nth-child(2n) {
    margin: 0 15px;
  }
  .block_product_hot .product-item .product-item-picture {
    width: 100%;
    height: calc(100vw / 1.8 - 30px);
  }
  .block_product_hot .product-item .product-item-picture img {
    width: 100%;
    height: calc(100vw / 1.8 - 30px);
    object-fit: cover;
  }
}

.block_product_hot .product-item-operate {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  z-index: 100;
  background: #f4f4f4;
  padding: 0 30px;
  transform: translateX(-100%);
  transition: transform 0.35s;
}

@media screen and (max-width: 767px) {
  .block_product_hot .product-item-operate {
    display: none;
  }
}

@media screen and (min-width: 767px) and (max-width: 1024px) {
  .block_product_hot .product-item-operate {
    padding: 10px 15px;
  }
  .block_product_hot .product-item-operate .product-item-operate-buy_now {
    padding-left: 0 !important;
  }
  .block_product_hot .product-item-operate .product-item-operate-buy_now .punk-btn-icon {
    width: 0 !important;
  }
  .block_product_hot .product-item-operate .product-item-operate-buy_now span {
    font-size: 12px !important;
  }
}

.block_product_hot .product-item-operate .product-item-operate-buy_now {
  flex: 1;
  margin-right: 10px;
  height: 44px;
  cursor: pointer;
  background-color: #fff;
  position: relative;
  height: 44px;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  font-size: 0;
  background-color: #ffffff;
  padding-left: 66px;
  cursor: pointer;
}

.block_product_hot .product-item-operate .product-item-operate-buy_now span {
  display: inline-block;
  height: 44px;
  line-height: 44px;
  color: var(--btn-font-color);
  background-color: var(--btn-bg-color);
  font-size: 14px;
  padding: 0 28px;
  position: relative;
  font-weight: bold;
  overflow: hidden;
}

.block_product_hot .product-item-operate .product-item-operate-buy_now:hover .punk-btn-icon {
  width: calc(100% + 12px);
}

.block_product_hot .product-item-operate .product-item-operate-buy_now .punk-btn-icon {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 66px;
  height: 44px;
  background-color: #ffb100;
  align-items: center;
  justify-content: center;
  transition: width 0.25s;
  z-index: 10;
}

.block_product_hot .product-item-operate .product-item-operate-buy_now .punk-btn-icon::before {
  position: absolute;
  right: -1px;
  top: 0;
  bottom: 0;
  border-top: 50px solid #ffffff;
  border-left: 10px solid transparent;
  border-right: 0 solid transparent;
  content: "";
  z-index: 10;
}

.block_product_hot .product-item-operate .product-item-operate-buy_now .punk-btn-icon svg {
  width: 22px;
  height: 22px;
}

.block_product_hot .product-item-operate .product-item-operate-buy_now .punk-btn-icon path {
  fill: #fff;
}

.block_product_hot .product-item-operate .product-item-operate-buy_now span {
  flex: 1;
  text-align: center;
  padding: 0;
}

.block_product_hot .product-item-operate .product-item-operate-like,
.block_product_hot .product-item-operate .product-item-operate-detail {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  cursor: pointer;
}

.block_product_hot .product-item-operate .product-item-operate-like svg,
.block_product_hot .product-item-operate .product-item-operate-detail svg {
  width: 22px;
  height: 22px;
}

.block_product_hot .product-item-operate .product-item-operate-like svg path,
.block_product_hot .product-item-operate .product-item-operate-detail svg path {
  fill: #262626;
}

@media screen and (max-width: 767px) {
  .block_product_hot .product_card-wap-name {
    display: none;
  }
}

{% endstylesheet %}
{% assign blockId = block_id | default : section.block_id %}
<div class="block_product_hot block_padding"  style="--bg-color:{{section.settings.bg_color}}">
    {% if section.settings.title != '' or section.settings.detail != '' %}
    <div class="block_title global_title">
        <h2>{{ section.settings.title }}</h2>
        {%- if section.settings.detail != "" -%}
        <div class="block_title-detail">{{ section.settings.detail }}</div>
        {%- endif -%}
    </div>
    {% endif %}
    <div class="hot-product-warp container-wrapper">
        {% for block in section.blocks %}
        {% assign product = '[]' %}
        {% get_product product_id={block.good.id} %}
        {%- capture href -%}
              {% if product.handle %}/products/{{ product.handle }}?data_from={{data_from}}{% else %}javascript:;{%endif%}
        {%- endcapture -%}
        
        <a href="{{href}}" class="product-item">
            <div class="product-item-picture">
                {% if block.label %}
                <div class="product-item-picture-label">{{block.label}}</div>
                {% endif %}
                <img src="{{ 'empty.png' | public_asset_abs_url }}" data-src="{{ product.image.src | default: "" }}" alt="{{ product.image.alt | default: product.title }}" />
                {% if product.available == 0 %}
                <div class="product_card-soldout">{{ lang.general.sold_out }}</div>
                {% endif %}
            </div>
            <div class="product-item-body">
                <div class="product-item-operate">
                    <div class="product-item-operate-buy_now" id="hot-product-{{blockId}}-{{forloop.index}}">
                        <div class="punk-btn-icon">{% include "icon_cart" %}</div>
                        <span>{{lang.product.add_to_cart}}</span>
                    </div>
                    <div class="product-item-operate-detail">{% include "icon_silde_right" %}</div>
                </div>

                <div class="product-item-info">
                    <div class="product-item-info-price general-price">
                        <span class="general-price">{{ product.variant.price | default:'88.88' | money }}</span>
                        {% if product.variant.compare_at_price != 0 %}
                        <span class="general-oldprice">{{ product.variant.compare_at_price  | default : "88.88" | money }}</span>
                        {% endif %}
                    </div>
                    <div class="product-item-info-title text-ellipsis {% unless theme_config.global.product_title_model %}product_card-wap-name{% endunless %}">{{ product.title|default:'title' }}</div>
                </div>
            </div>

            {% if product.size > 0 %}
            <script>
                (function(){

                const productDetail = new omesaasProduct({
                        renderOption: false,
                        product: {{product | json}},
                        data_from: '{{ data_from }}',
                        ec_currency_code: '{{ base_currency.standard_code }}'
                })
                $("#hot-product-{{blockId}}-{{forloop.index}}").click(function (e) {
                        e.stopPropagation();
                        e.preventDefault();
                        if (!productDetail.verifyOption('cart')) {
                            return false
                        }
                        var load = moi.nodeShowLoading(this, "mo-loading-black")
                        productDetail.addCart(function () { load.close(); }, function (data) {
                            if (!data.code) {
                                productDetail.cartLayer();
                            } else {
                                return moi.alert({
                                    title: data.msg
                                });
                            }
                        })
                    })
                })()
            </script>
        {% endif %}
        </a>
       
       {% endfor %}
    </div>
</div>

{% schema %}
{
	"tag": "",
	"class": "product_hot",
	"icon": "icon-dangeshangpin",
	"is_global": false,
	"name": {
		"zh_CN": "热销商品"
	},
	"max_blocks": 3,
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置"
			}
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "标题"
			},
			"id": "title",
			"default": "New Arrivals"
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "简短描述"
			},
			"id": "detail",
			"default": "bottom_center"
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "背景颜色"
			},
			"default": "#dddddd",
			"id": "bg_color"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "商品"
			}
		}
	],
	"blocks": [
		{
			"name": {
				"zh_CN": "选择商品"
			},
			"type": "product-item",
			"settings": [
				{
					"type": "card_product",
					"label": {
						"zh_CN": "选择商品"
					},
					"default": {
						"id": "",
						"title": ""
					},
					"id": "good"
				},
				{
					"type": "card_input",
					"label": {
						"zh_CN": "输入标签"
					},
					"default": "",
					"id": "label"
				}
			]
		}
	],
	"default": {
		"settings": {
			"title": "TITLE",
			"detail": "",
			"bg_color": "#dddddd"
		},
		"blocks": [
			{
				"block_type": "product-item",
				"good": {
					"id": "",
					"title": ""
				},
				"label": "Shark Helmet"
			},
			{
				"block_type": "product-item",
				"good": {
					"id": "",
					"title": ""
				},
				"label": "Shark Helmet"
			},
			{
				"block_type": "product-item",
				"good": {
					"id": "",
					"title": ""
				},
				"label": "Shark Helmet"
			}
		]
	}
}
{% endschema %}